<script setup>
import { ref } from 'vue'
import { forget, login, register } from '@/apis/user'
import { useRouter } from 'vue-router'
import { ElNotification } from 'element-plus'
import { useUserStore } from '@/stores'

const router = useRouter()

const loginForm = ref({
  phone: '',
  password: '',
})

const resetForm = () => {
  loginForm.value.phone = ''
  loginForm.value.password = ''
}

const userStore = useUserStore()
const handleSignIn = async () => {
  const response = await login(loginForm.value)
  if (response.code === 200) {
    ElNotification({
      title: '提示',
      message: '登陆成功',
      type: 'success',
      duration: 1500,
    })
    console.log(response)

    userStore.setUser(response.data.data)
    userStore.setToken(response.data.token)
    
    router.push('/')
  } else {
    ElNotification({
      title: '提示',
      message: '账号或密码错误',
      type: 'error',
      duration: 1500,
    })
  }

  resetForm()
}

const handleSignUp = async (data) => {
  loginForm.value.phone = data.phone
}

const handleSetPassword = async (data) => {
  console.log(data)
  loginForm.value.password = data.password
  const formData = {
    phone: loginForm.value.phone,
    password: loginForm.value.password,
  }
  resetForm()
  if (data.pathId === 'register') {
    const response = await register(formData)
    console.log(response)
    if (response.code === 200) {
      ElNotification({
        title: '提示',
        message: '注册成功',
        type: 'success',
        duration: 1500,
      })
    } else {
      ElNotification({
        title: '提示',
        message: '注册失败',
        type: 'error',
        duration: 1500,
      })
    }
  } else {
    const response = await forget(formData)
    console.log(response)
    if (response.code === 200) {
      ElNotification({
        title: '提示',
        message: '设置成功',
        type: 'success',
        duration: 1500,
      })
    } else {
      ElNotification({
        title: '提示',
        message: '设置失败',
        type: 'error',
        duration: 1500,
      })
    }
  }
}
</script>

<template>
  <div class="login-index">
    <img class="login-bg" src="/public/images/loginbg1.png" alt="" />
    <div class="form-data">
      <!-- 过渡动画 -->
      <router-view v-slot="{ Component }">
        <Transition name="slide" mode="out-in">
          <component
            :is="Component"
            :loginForm="loginForm"
            @sign-in="handleSignIn"
            @sign-up="handleSignUp"
            @set-password="handleSetPassword"
          />
        </Transition>
      </router-view>
    </div>
  </div>
</template>

<style scoped lang="scss">
.login-index {
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
  height: 100vh;
  width: 100vw;
  background-color: #f0f3fc;

  .login-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-repeat: repeat;
  }

  .form-data {
    align-self: flex-end;
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 600px;
    width: 450px;
    margin-right: 200px;
    padding: 25px;

    background: rgba(255, 255, 255, 0.6); /* 半透明背景 */
    backdrop-filter: blur(10px); /* 模糊效果 */
    -webkit-backdrop-filter: blur(10px); /* 兼容 Safari */
    border-radius: 15px; /* 圆角 */
    border: 1px solid rgba(255, 255, 255, 0.3); /* 细边框 */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3); /* 阴影 */
  }
}

// 动画
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.5s;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}

/* 滑动进入动画 */
.slide-enter-active,
.slide-leave-active {
  transition:
    transform 0.5s ease-in-out,
    opacity 0.5s ease-in-out;
}

/* 进入时从左侧滑入 */
.slide-enter-from {
  transform: translateX(-50%);
  opacity: 0;
}

/* 离开时向右滑出 */
.slide-leave-to {
  transform: translateX(50%);
  opacity: 0;
}
</style>
